//创建轮播类
class Swiper {
    //属性
    constructor(id) {
        this.swiperRoot = document.querySelector('#banner')
        this.ulEle = this.swiperRoot.querySelector('.swiper') //获取ul相框
        this.preEle = this.swiperRoot.querySelector('.pre') //上一个
        this.nextEle = this.swiperRoot.querySelector('.next') //下一个
        this.olEle = this.swiperRoot.querySelector('.swiper-pagination') //获取ol分页器

        this.count = this.ulEle.querySelectorAll('li').length //获取图片个数长度
        // console.log(this.count);
        this.ulEleWidth = parseInt(window.getComputedStyle(this.swiperRoot).width) //获取相框宽度
        // console.log(this.ulEleWidth);
        this.index = 0
        this.ismove = false

    }

    init() {
        //动态添加轮播需要的第一张和最后一张图
        let firstLi = this.ulEle.firstElementChild.cloneNode(true)
        let lastLi = this.ulEle.lastElementChild.cloneNode(true)
        console.log(firstLi, lastLi);

        //t添加
        this.ulEle.appendChild(firstLi)
        this.ulEle.insertBefore(lastLi, this.ulEle.firstElementChild)

        //生成动态分页器
        for (let i = 0; i < this.count; i++) {
            let liEle = document.createElement('li') //生成li
            this.olEle.appendChild(liEle)

        }
        //获取分页器li
        this.olliEle = this.olEle.querySelectorAll('li')

        console.log(this.olliEle);
        this.nextmove()
        this.premove()
        this.addselect()
        this.onpagination()

    }


    //上下页轮播

    //下一张轮播
    nextmove() {
        let _this=this
        this.nextEle.onclick = function () {
            // alert('11')
            console.log(_this.index);
            if (_this.ismove == false) {
                if (++_this.index >= _this.count) {
                    _this.index = 0
                }
                _this.addselect()
                _this.move(_this.ulEle, -200)
            }
        }
    }

    //上一张轮播
    premove(){
        let _this=this
        this.preEle.onclick = function () {
            // alert('11')
            console.log(_this.index);
            if (_this.ismove == false) {
                if (--_this.index <0) {
                    _this.index = _this.count-1
                }
                _this.addselect()
                _this.move(_this.ulEle, 200)
            }
        }
    }

    //清除样式
    clearselect() {
        for (let i = 0; i < this.olliEle.length; i++) {
            this.olliEle[i].classList.remove('active')
        }
    }

    //设置添加选中样式
    addselect() {
            this.clearselect()
            this.olliEle[this.index].classList.add('active')
    }

    //点击切换
    onpagination() {
        //循环遍历分页器绑定事件
        let _this=this
        for (let i = 0; i < this.olliEle.length; i++) {
            this.olliEle[i].onclick = function () {
                if (_this.ismove == false) {
                    let data_index = i - _this.index
                    _this.index = i
                    _this.addselect()
                    console.log('i', i);
                    console.log('data_index ', data_index);
                    _this.move(_this.ulEle, -200 * data_index)
                }
            }
        }
    }

    //自动轮播
    startmove() {
        let _this=this
        setInterval(function () {
            // if (ismove == false) {
            //     move(ulEle, -200)
            // }
            if (_this.ismove == false) {
                //下一张导航，分页号加一
                if (++_this.index >= 5) {
                    _this.index = 0
                }
                console.log(_this.index);

                _this.addselect()
                _this.move(_this.ulEle, -200)
            }
        }, 2000)
    }


   
    //移动
    move(ele, offset1) {
        let _this = this
        this.ismove = true
        /* 初始化元素当前位置 */
        ele.style.left = window.getComputedStyle(ele).left
        let offset = offset1 //偏移量
        let rate = 30 //移动速度
        let time = 1000 //移动时间
        let distant = rate * offset / time
        let goal = parseInt(ele.style.left) + offset // 目标位置 = 初始位置+偏移量

        let timer = setInterval(function () {
            //移动200结束
            if (parseInt(ele.style.left) == goal ||
                Math.abs(Math.abs(goal) - Math.abs(parseInt(ele.style.left))) < Math.abs(distant)) {
                ele.style.left = goal + 'px'
                clearInterval(timer)

                if (parseInt(ele.style.left) == -1200) {
                    ele.style.left = -200 + 'px'
                } else if (parseInt(ele.style.left) == 0) {
                    ele.style.left = -1000 + 'px'
                }
                _this.ismove = false

            } else {
                ele.style.left = parseInt(ele.style.left) + distant + 'px'
            }

        }, rate)
    }
}